<template>
  <div class="container" style="padding-left: 10px;padding-right: 10px;">
    <el-row :gutter="20">
      <el-col :span="12" class="left">
        <el-row class="left-head" :gutter="20">
          <el-col :span="14" >
          <el-card shadow="always" style="height:180px;">
            <el-row v-if="this.$store.state.user.userid" :gutter="20">
              <el-col :span="10">
                <div class="head-img" @click="goto('/setting')">
                  <el-image
                      style="width: 120px; height: 120px;border-radius: 50%;"
                      src="../../../static/img/user.jpg"
                      :fit="fit"></el-image>
                </div>
              </el-col>
              <el-col :span="14" class="head-info">
                <p style="font-size: 30px;font-weight: bold;color: #A52A2A;margin:0;">{{name}}</p>
                <p style="color: #1E90FF;margin-top:5px;margin-bottom: 10px;">[{{usertype}}]</p>
                <p style="color: #778899;margin:25px;">您好啊,{{ usertype }}~</p>
              </el-col>
            </el-row>
            <el-row v-else>
              <h2>暂无用户信息，请先登录</h2>
              <el-button @click="toLogin">请登录</el-button>
            </el-row>
          </el-card>  
          </el-col>
          <el-col :span="10">
           <el-card shadow="always" style="height:180px;display: flex; justify-content: center; align-items: center;">
              <el-image
                style="width: 100%;height:100%;padding:0"
                src="../../../static/img/flower.jpg"
                :fit="fit"></el-image>
            </el-card>             
          </el-col>
        </el-row>
        <el-row class="left-notice">
          <el-card shadow="always" style="font-size: 18px;font-weight:bold;color: #A52A2A;">
            最新公告
          </el-card>
        </el-row>
        <el-row class="left-message">
          <el-card shadow="always">
            <div v-for="item in noticeList" :key="index">
              <el-row>
                <el-col :span="2">
                  <el-image
                      style="width: 20px; height: 20px;border-radius: 50%;padding: 30px 0"
                      src="../../../static/img/message.svg"
                      :fit="fit"></el-image>
                </el-col>
                <el-col :span="20">
                  <p style="text-align: left;font-size: 18px">{{item.title}}<span style="font-size: 15px;color: gray">   {{item.date}}</span></p>
                  <p style="text-align: left;font-size: 15px;color: gray">{{item.notice}}</p>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="12" class="right">
        <el-row>
          <el-col :span="4">
            <el-card shadow="always" style="height:65px;background-color:#EEB4B4;">
              <i class="el-icon-s-claim" style="font-size: 30px;color:#8B6969"></i>
            </el-card>
          </el-col>
        <el-col :span="20">
          <el-card shadow="always" style="height:65px;text-align: left;">
            <el-row>
            <el-col :span="10">
              <span style="color: #778899;">
              今日支付订单</span>
            </el-col>
            <el-col :span="14">
              <span style="font-size: 20px;font-weight:bold;color: #A52A2A;">
              ￥{{fixMoney / 100}}</span>
            </el-col>           
            </el-row>
          </el-card>        
        </el-col>
        </el-row>       
        <el-row>
          <el-col :span="4">
            <el-card style="height:65px;background-color:#98FB98;margin: 10px 0;">       
              <i class="el-icon-thumb" style="font-size: 30px;color:#2E8B57;"></i>
            </el-card>
          </el-col>
          <el-col :span="20">
          <el-card shadow="always" style="height:65px;text-align: left;margin: 10px 0;">
            <el-row>
            <el-col :span="10">
              <span style="color: #778899;">
              今日报修数</span>
            </el-col>
            <el-col :span="14">
              <span style="font-size: 20px;font-weight:bold;color:#9ACD32">
              {{fixCount}}</span>
            </el-col>
            </el-row>        
            </el-card>
          </el-col>
          </el-row>
        <el-card shadow="always">
          <el-calendar v-model="date">
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "home",
  data() {
    return {
      fixCount: 0,
      fixMoney: 0,
      date: null,
      username: this.$store.state.user.username,
      name: this.$store.state.user.name,
      usertype: this.$store.state.user.usertype,
      noticeList: []
    }
  },
  watch: {
    date:  {
      handler(newVal, oldVal) {
        this.getFixCount(newVal);
        this.getOrderMoney(newVal);
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getUser();
      this.getNoticeList();
      this.getFixCount(new Date());
      this.getOrderMoney(new Date());
    },
    formatDate(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? '0' + m : m;
      var d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + m + '-' + d;
    },
    getFixCount(date) {
      axios.post('http://112.124.41.199:6112/csms/fix/getFixCountByDate', {
        start: this.formatDate(date) + ' 00:00:00',
        end: this.formatDate(date) + ' 23:59:59'
      }).then(res => {
        this.fixCount = res.data
      }).catch(err => {
        this.$message.error(err);
      })
    },
    getOrderMoney(date) {
      axios.post('http://112.124.41.199:6112/csms/order/getOrderMoney', {
        start: this.formatDate(date) + ' 00:00:00',
        end: this.formatDate(date) + ' 23:59:59'
      }).then(res => {
        this.fixMoney = res.data
      }).catch(err => {
        this.$message.error(err);
      })
    },
    getNoticeList() {
      axios.post('http://112.124.41.199:6112/csms/notice/list', {
        statu: '正常'
      }).then(res => {
        this.noticeList = res.data
      }).catch(err => {
        this.$message.error(err);
      })
    },
    getUser() {
      axios.post('http://112.124.41.199:6112/csms/user/getUserById', {
        userid: this.$store.state.user.userid
      }).then(res => {
        this.usertype = res.data.usertype === 0 ? '管理员' : '用户';
        this.username = res.data.username;
        this.name = res.data.name;
        this.audit = res.data.audit === 0 ? '未审核' : '已审核';
      }).catch(err => {
        this.$message.error(err);
      })
    },
    goto(url) {
      this.$router.push(url)
    },
    toLogin() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.left {
  padding: 10px;
}
.right {
  //background-color: #ead6bb;
  padding: 10px;
}
.left-notice {
  padding: 10px 0;
}
.el-card__body {
    padding: 5px;
}
</style>
